<template>
<div class="avue-top">
  <div class="top-bar__left">
    <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" v-if="showCollapse">
      <i class="icon-navicon" @click="setCollapse"></i>
    </div>
  </div>
  <div class="top-bar__title">
    <div class="top-bar__item top-bar__item--show" v-if="showMenu">
      <top-menu ref="topMenu"></top-menu>
    </div>
    <span class="top-bar__item" v-if="showSearch">
      <top-search></top-search>
    </span>
  </div>
  <div class="top-bar__right">
    <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
      <div class="top-bar__item">
        <top-color></top-color>
      </div>
    </el-tooltip>
    <!-- <el-tooltip v-if="showDebug"
                  effect="dark"
                  :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
                  placement="bottom">
        <div class="top-bar__item">
          <top-logs></top-logs>
        </div>
      </el-tooltip> -->
    <el-tooltip v-if="showLock" effect="dark" :content="$t('navbar.lock')" placement="bottom">
      <div class="top-bar__item">
        <top-lock></top-lock>
      </div>
    </el-tooltip>
    <el-tooltip v-if="showTheme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
      <div class="top-bar__item top-bar__item--show">
        <top-theme></top-theme>
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" :content="$t('navbar.language')" placement="bottom">
      <div class="top-bar__item top-bar__item--show">
        <top-lang></top-lang>
      </div>
    </el-tooltip>
    <el-tooltip v-if="showFullScren" effect="dark" :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')" placement="bottom">
      <div class="top-bar__item">
        <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
      </div>
    </el-tooltip>
    <img class="top-bar__img" :src="userInfo.avatar">
    <el-dropdown>
      <span class="el-dropdown-link">
        {{userInfo.name}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/info/setting">{{$t('navbar.setting')}}</router-link>
        </el-dropdown-item>
        <el-dropdown-item @click.native="showUpdatePassword">
          修改密码
        </el-dropdown-item>
        <el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
  <el-dialog class="avue-dialog" append-to-body :show-close="false" :close-on-press-escape="false" :close-on-click-modal="passFlag" title="修改密码" :visible.sync="isUpdatePassword" width="30%">
    <el-form :model="user" status-icon :rules="rules" ref="user" size="small" label-width="100px">
      <el-form-item label="旧密码" prop="oldpassword">
        <el-input type="password" show-password v-model="user.oldpassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newspassword">
        <el-input type="password" show-password v-model="user.newspassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="newspasswords">
        <el-input type="password" show-password v-model="user.newspasswords" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlePasswd">提交</el-button>
        <el-button @click="hideUpdatePassword">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
// import flag from '@/mixins/flag';
// import {
//   validPass
// } from '@/util/validate'
import {
  resetPassword
} from '@/api/user'
import {
  resetRouter
} from '@/router/router'
import {
  mapGetters,
  mapState
} from "vuex";
import {
  fullscreenToggel,
  listenfullscreen
} from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topLang from "./top-lang";

export default {
  // mixins: [flag],
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topLang
  },
  name: "top",
  data() {
    return {
      user: {
        oldpassword: '',
        newspassword: '',
        newspasswords: ''
      },
      rules: {
        oldpassword: [{
          required: true,
          message: '旧密码不能为空',
          trigger: 'blur'
        }, ],
        newspassword: [{
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
          }
          // ,{
          //   validator: validPass,
          //   trigger: 'change'
          // }
        ],
        newspasswords: [{
          required: true,
          message: '确认密码不能为空',
          trigger: 'blur'
        }, ]
      },
      // box: false,
    };
  },
  filters: {},
  created() {
    // if (!this.validatenull(this.passFlag) && !this.passFlag) {
    //   this.$alert('当前密码为不符合系统安全规定，请修改密码', '安全提示', {
    //     confirmButtonText: '修改',
    //     callback: () => {
    //       this.$store.commit('SET_ISUPDATEPASSWORD', false);
    //     }
    //   });
    // }
  },
  mounted() {
    listenfullscreen(this.setScreen);
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showCollapse: state => state.common.showCollapse,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters([
      'passFlag',
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag",
      "isUpdatePassword"
    ])
  },
  methods: {
    handlePasswd() {
      if (this.user.newspasswords != this.user.newspassword){
        this.$message.error("新密码和确认密码不一致");
      }else{
        this.$refs.user.validate((valid) => {
          if (valid) {
            resetPassword({
              oldPw: window.md5(this.user.oldpassword).toUpperCase(),
              newPw: window.md5(this.user.newspassword).toUpperCase()
            }).then(() => {
              this.user.oldpassword = '';
              this.user.newspassword = ''
              this.$store.commit('SET_ISUPDATEPASSWORD', false);
              this.$store.commit('SET_PASSFLAG', true)
              this.$message.success('密码修改成功')
            })
          }
        });
      }
    },
    handleScreen() {
      fullscreenToggel();
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tipmsg"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning"
      }).then(() => {
        //删除全局水印
        // window.watermark.remove()
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({
            path: "/login"
          });
        });
      });
    },
    showUpdatePassword(){
      this.$store.commit('SET_ISUPDATEPASSWORD', true);
    },
    hideUpdatePassword(){
      this.$store.commit('SET_ISUPDATEPASSWORD', false);
    },
  }
};
</script>

<style lang="scss" scoped>
</style>
